<template>
  <div class="my-loading">
    <uploader></uploader>
    <div class="my-loading-inner" :style="{'width':progressNum + '%','background':innerColor,'height':innerHeight + 'px'}"></div>
    <div v-if="iconShow" style="position: fixed;z-index: 9999;top: 10px;right: 20px">
      <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px"
           viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                  <path :fill="innerColor"
                        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
                    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25"
                                      to="360 25 25" dur="0.25s" repeatCount="indefinite"></animateTransform>
                    </path>
      </svg>
    </div>
  </div>
</template>

<script>
  export default {
    name: "shou-loading-bar",
    data() {
      return {
        progressNum: 0, //百分比
        iconShow: false,//控制svg图标
        fadeOutControl: true,
        innerFlag:false, //控制定时器
        innerColor:'#409EFF',
        innerHeight:2
      }
    },
    mounted() {
      let i = 1;
      setInterval(() => {
        if (this.innerFlag){
          this.progressNum += i;
          i = i > 3 ? 0 : i + 1;
          if (this.progressNum >= 90) {
            this.innerFlag = false;
          }
        }
      }, 200);
    },
    methods: {
      //开始
      start() {
        this.progressNum = 0;
        this.innerFlag = true;
        this.iconShow = true;
        document.getElementsByClassName('my-loading-inner')[0].classList.remove('fadeOut','lError');
      },

      //完成加载
      finish(error) {

        this.iconShow = false;
        this.innerFlag = false;

        this.progressNum = 100;

        const inner = document.getElementsByClassName('my-loading-inner')[0];
        inner.classList.remove('fadeOut','lError');

        setTimeout(()=>{
          inner.classList.add('fadeOut');
          if (error){
            inner.classList.add('lError')
          }
        },50);

        if (this.fadeOutControl){
          this.fadeOutControl = false;
          setTimeout(()=>{
            this.progressNum = 0;
            this.fadeOutControl = true
          },800);
        }
      },
      //加载失败
      failed() {
        this.finish(true);
      },

      //精确修改
      update(percent){
        this.iconShow = true;
        document.getElementsByClassName('my-loading-inner')[0].classList.remove('fadeOut','lError');
        this.$set(this,'progressNum',percent);
      }
    }
  }
</script>
<style scoped>
  .my-loading {
    position: fixed;
    width: 100%;
    z-index: 999999;
    top: 0
  }

  .my-loading-inner {
    height: 2px;
    transition: .2s cubic-bezier(.46, .03, .52, .96);
  }

  .my-loading-inner.dark {
    background: #ec6149;
  }

  .my-loading-inner.lError {
    background: red !important;
  }

  .my-loading-inner.fadeIn {
    animation: fadeIn linear .5s;
  }

  .my-loading-inner.fadeOut {
    animation: fadeOut linear .8s;
    transition: opacity,width .8s linear;
    opacity: 0;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    50%{
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>
